<!DOCTYPE html>
<html>
<head>
	<title>video test</title>
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
		$(window).ready(function(){
			var video = $("#v");
			var cv = $("#cv");
			var ctx = cv.get(0).getContext("2d");

			//var img = new Image();
			//img.src = "images/back.jpg";

			video.bind("play",function(){
				draw_canvas();
			});

			function draw_canvas(){
				if(video.get(0).paused || video.get(0).ended)
					return false;
				else{
					//maybe use chrome with option --allow-file-access-from-files
					//or getImageData failed due to Same-Origin Policy
					ctx.drawImage(video.get(0),0,0,500,300);
					//ctx.drawImage(img,0,0,500,300);
					var data = ctx.getImageData(0,0,cv.width(),cv.height());
					var pixels = data.data;
					ctx.clearRect(0,0,cv.width(),cv.height());
					var rows_count = 36;
					var cols_count = 64;
					var item_w = data.width/cols_count;
					var item_h = data.height/rows_count;

					for(var r=0;r<rows_count;r++){
						for(var c=0;c<cols_count;c++){
							var x=(c*item_w)+(item_w/2);
							var y=(r*item_h)+(item_h/2);
							var pos = (Math.floor(y)*(data.width*4))+(Math.floor(x)*4);
							var red = pixels[pos];
							var green = pixels[pos+1];
							var blue = pixels[pos+2];
							ctx.fillStyle="rgb("+red+","+green+","+blue+")";
							ctx.fillRect(x-(item_w/2),y-(item_h/2),item_w,item_h);
						}
					}
					setTimeout(draw_canvas,30);
				}
			}

			$("#play").click(function(){
				video.get(0).play();
			});
			$("#stop").click(function(){
				video.get(0).pause();
			});
		});
	</script>
</head>
<body>
<h1>Video Test</h1>
<video id="v" width="500" height="300" controls>
		<source src="videos/movie.ogg" type="video/ogg"></video>
	</video>
<canvas id="cv" width="500" height="300">
		
</canvas>
<div>
	<button id="play">Play</button>
	<button id="stop">Stop</button>
</div>
</body>
</html>